<template>
    <div class="tab">
        <div class="tab-box">
        <ul class="tab-tit">
            <!-- <li @click='toDetail'>详情</li> -->
            <li><router-link :to="'/detail/'+courseId">详情</router-link></li>
            <li><router-link to='/menu'>目录</router-link></li>
        </ul>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "Tab",
  computed: {
    ...mapState(["courseId"])
  }
  // methods:{
  //     toDetail(){
  //         this.$router.push('/detail/'+this.courseId);
  //     }
  // }
};
</script>
<style scoped>
.tab {
  height: 0.71rem;
}
.tab-box {
  width: 100%;
  max-width: 750px;
  height: 0.71rem;
  background-color: #fff;
  transition: 0.3s ease;
}
.tab-box-fixed {
  position: fixed;
  top: 0;
  box-shadow: 0 2px 2px rgba(163, 163, 163, 0.41);
  z-index: 2;
}
.tab-tit {
  font-size: 0.28rem;
}
.tab-tit li {
  display: block;
  position: relative;
  line-height: 0.71rem;
  width: 50%;
  float: left;
  text-align: center;
  color: #000;
}
.tab-tit li a:after {
  display: block;
  content: "";
  height: 0.04rem;
  width: 0;
  opacity: 0;
  background-color: #32b16c;
  position: absolute;
  left: 50%;
  bottom: 0;
  transition: all 0.3s ease;
}
.tab-tit li a.router-link-exact-active {
  color: #32b16c;
}
.tab-tit li a.router-link-exact-active:after {
  width: 30%;
  opacity: 1;
  margin-left: -15%;
}
</style>

